<template>
	<view class="menu-container">
		<view v-for="menu in menus" :key="menu.id" class="menu-item" @click.stop="goToUrl(menu)">
			<image :src="menu.icon" class="menu-icon"></image>
			<view class="menu-name">{{ menu.name }}</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request'
export default {
	data() {
		return {
			menus: []
		}
	},
	async onLoad() {
		this.menus = await request.get('/menus')
	},
	methods: {
		goToUrl(e) {
			uni.navigateTo({
				url: `/pages/detail/index?id=${e.id}&name=${e.name}`
			});
		}
	}
}
</script>

<style>
.menu-container {
	min-height: 100vh;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32rpx;
	padding: 20rpx;
	background-color: #121212;
}

.menu-item {
	text-align: center;
	padding: 16rpx 0;
	border-radius: 20rpx;
	background: linear-gradient(145deg, #1E1E1E, #2B2B2B);
	box-shadow: 
		0 6rpx 15rpx rgba(0, 0, 0, 0.6),
		0 -4rpx 8rpx rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item:hover {
	transform: translateY(-10rpx);
	box-shadow: 
		0 10rpx 20rpx rgba(0, 0, 0, 0.8),
		0 -6rpx 12rpx rgba(255, 255, 255, 0.2);
}

.menu-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-bottom: 10rpx;
	box-shadow: 0 4rpx 10rpx rgba(255, 255, 255, 0.4);
}

.menu-name {
	font-size: 26rpx;
	color: #E0E0E0;
	transition: color 0.3s ease;
}

.menu-name:hover {
	color: #A0A0A0;
}
</style>
